<template>
  <div class="form">
    <div class="title">
      <div class="c_flex" style="padding:10px"> {{type == "add" ? "新增加盟商" : "修改加盟商"}} </div>
    </div>
    <van-form :label-width="60" validate-first @submit="onSubmit">
     
     
   
     
      
     
     
      <normal_item v-model="user_data.franchisee_name" :to_rule="[{validator: valid_name,message: '请输入正确的加盟商名称'}]" txt_tip="加盟商名称" />
      <normal_item v-model="user_data.corporate" :to_rule=" [{validator: valid_name,message: '请输入正确的加盟商法人'}]"  txt_tip="加盟商法人" />
      <normal_item v-model="user_data.mobile" :to_rule="[{validator: valid_phone,message: '请输入正确的手机号'}] " txt_tip="手机号" />
      <template v-if="this.type == 'update'" >
      <normal_item :is_require="false" v-model="user_data.tax_number"   txt_tip="纳税识别号" /> 
      <normal_item :is_require="false" v-model="user_data.bank_number"   txt_tip="银行卡号" />
      <normal_item :is_require="false" v-model="user_data.bank"  txt_tip="所属银行" />
      <normal_item :is_require="false" v-model="user_data.open_bank_name"  txt_tip="开户行" />
      <normal_item :is_require="false" v-model="user_data.cooperation_sn"  txt_tip="合同编号" />
      
       <time-picker :is_require="false" v-model="user_data.cooperation_start_date" txt_tip="开始时间"  />
       <time-picker :is_require="false" v-model="user_data.cooperation_end_date" txt_tip="结束时间"  />
       <upload-multi v-model="user_data.cooperation_images" prop_title="合同照片" />
       <upload-multi v-model="user_data.business_license" prop_title="营业执照" />
      </template>
      <!-- <normal_item v-model="user_data.bond" :to_rule="[{pattern:number_pattern,message:' 请符合数字格式'}]" txt_tip="保证金" /> -->
      <!-- <van-field :rules="[{ required: true, message: '请填写合同年数' }]" :name="user_data.cooperation_years"
        placeholder="合同年数">
        <template #left-icon>
          <svg-icon class-name="icon_size" icon-class="time" />
        </template>
        <template #input>
          <van-radio-group v-model="user_data.cooperation_years" direction="horizontal">
            <van-radio name="1">1年</van-radio>
            <van-radio name="2">2年</van-radio>
            <van-radio name="3">3年</van-radio>
          </van-radio-group>
        </template>
      </van-field> -->
      <!-- <radio v-model="user_data.cooperation_years"
        :options="[{text:'1年',value:'1'},{text:'2年',value:'2'},{text:'3年',value:'3'}]" txt_tip="合同年数" /> -->
      
      <!-- <dept :options="region_option" :src_value="user_data.all_region_text" :fieldNames="fieldNames" v-model="user_data.region_id" 
          txt_tip="所在地区" /> -->
      <div class="show_img">
        <uploader v-model="user_data.id_card_front" class="set_width_height" text="身份证正面" />
        <uploader v-model="user_data.id_card_back" class="set_width_height" text="身份证反面" />
      </div>
      <div class="show_img">
        <div>身份证正面</div>
        <div>身份证反面</div>
      </div>
      
      <div class="submit_out c_flex">
        <van-button type="submit" class="submit">确定</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
  import uploader from "@/components/Upload"
  import uploadMulti from '@/components/Upload/multi.vue'
  // import radio from '@/views/user/component/radio'
  import TimePicker from '@/components/TimePicker'
  import normal_item from '@/views/user/component/normal_item'
  // import dept from '@/views/user/component/dept'
  import {
    // RegionService,
    ShoperService
  } from "@/api"
  export default {
    name: "addForm",
    props: {
      type: String,
      shoper: Object,
    },
    components: {
      // dept,
      uploadMulti,
      uploader,
      // radio,
      normal_item,
      TimePicker
    },
    mounted() {
      // this.getRegionOption();
      this.update();
    },
    activated() {
      this.update();
    },
    computed: {

      now_date() {
        return new Date();
      },
    },

    unactivated() {
      this.emptyData();
    },
    watch: {
      shoper: {
        handler(value) {
          if (this.type == 'update') {
            this.user_data = value;
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      update() {
        if (this.type == 'update') {
          this.user_data = this.shoper;
          this.fieldValue = this.shoper.all_region_text;
          console.log(this.shoper)
        }
      },
      onSelect({
        selectedOptions
      }) {
        console.log(selectedOptions)
        // this.show = false;
        this.fieldValue = selectedOptions.map((option) => option.region_name).join('/');
      },
      
      emptyData() {
        this.user_data = this.$options.data().user_data;
      },
      onSubmit() {
       
        if (this.type == 'update') {
          ShoperService.editShoper(this.user_data, this.shoper.id).then((res) => {
            if (res.code != 10000) {
              // this.$toast(res.message)
              return;
            }
            this.$EventBus.$emit('update_one');
            this.$emit('change_date');
          })
        } else {

          ShoperService.addShoper(this.user_data).then(res => {
            console.log(res);
            if (res.code != 10000) {
              // this.$toast(res.message)
              return;
            }
            this.$EventBus.$emit('update_list');
            this.$emit('change_date');
          })
        }
      },
      valid_name(value) {
        return /^(?:[\u4e00-\u9fa5·]{2,16})$/.test(value)
      },
      valid_tax(value) {
        return /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(value);
      },
      valid_phone(value) {
        return /^(?:(?:\+|00)86)?1\d{10}$/.test(value);
      },
      valid_bank_card(value) {
        return /^[1-9]\d{9,29}$/.test(value);
      },

      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      changeCalendar(val) {
        this.user_data.cooperation_start_date = val.format('YYYY-MM-DD');

      },
      changeSign(val) {
        this.user_data.sign_time = val.format('YYYY-MM-DD');
      },

    },
    data() {
      return {
        show: false,
        show_calendar: false,
        show_sign: false,
        fieldValue: '',
        number_pattern: /^\d+(\.\d+)?$/,
        fieldNames: {
          text: 'region_name',
          value: 'id',
          children: 'children',
        },
        user_data: {
          franchisee_name: '',
          corporate: '',
          tax_number: '',
          mobile: '',
          open_bank_name: '',
          bank_number: '',
          bond: '',
          bank: '',
          cooperation_start_date: '',
          cooperation_end_date: '',
          cooperation_images: '',
          id_card_front: '',
          id_card_back: '',
          // cooperation_sn: '',
          business_license: '',
        },

      }
    },

  }
</script>

<style lang="less" scoped>
  .form {
    .title {
      width: 50%;
      border-bottom: 1px solid rgba(153, 153, 153, 1);
      margin: 0 auto 15px;
    }

    margin: 0 auto;

    .icon_size {
      width: 30px;
      height: 30px;
      margin-right: 15px;
    }

    .show_img {
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;

      .set_width_height {
        width: 160px;
        height: 160px;
      }
    }

    .submit_out {
      margin-top: 40px;
      margin-bottom: 30px;
    }

    .submit {

      width: 360px;
      height: 70px;
      border-radius: 37.84px;
      background-color: rgba(235, 95, 17, 1);
      letter-spacing: 1.8px;
      font-size: 28px;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>